<template>
  <section class="chart-container">
    <div class="c_header">
      <div class="select_top">
        <el-date-picker
          v-model="year"
          type="year"
          placeholder="请选择年"
          valueFormat="yyyy"
          format="yyyy"
        >
        </el-date-picker>
        <el-button style="margin-left:10px" @click="getxjList">检索</el-button>
      </div>
      <el-table
        :data="xjList"
        style="width: 92%;font-size:13px;margin:0 auto"
      >
        <el-table-column
          prop="hash.orgname"
          label="责任单位"
        >
        </el-table-column>
        <el-table-column
          prop="hash.nname"
          label="指标名称"
        >
        </el-table-column>
        <el-table-column
          prop="hash.taskdate"
          label="日期"
        >
        </el-table-column>

        <el-table-column
          prop="hash.intime"
          label="提交时间"
        >
        </el-table-column>
        <el-table-column
          label="操作"
          width="150"
        >
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="small"
              v-if="scope.row.hash.status=='0'"
              @click="changeXJ(scope.row)"
            >
              编辑
            </el-button>
            <el-button
              type="primary"
              size="small"
              @click="checkXJ(scope.row)"
              v-else
            >
              查看
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog
        title="编辑小结"
        :visible.sync="showI"
      >
        <el-form labelWidth="140px">
          <el-form-item label="基本情况">
            <el-input
              v-validate="'required'" name="基本情况"
              type="textarea"
              :rows="3"
              placeholder="请输入内容"
              v-model="context1"
            >
            </el-input>
            <div class="el-form-item__error">{{ errors.first('基本情况') }}</div>
          </el-form-item>
          <el-form-item label="工作亮点">
            <el-input
              v-validate="'required'" name="工作亮点"
              type="textarea"
              :rows="3"
              placeholder="请输入内容"
              v-model="context2"
            >
            </el-input>
            <div class="el-form-item__error">{{ errors.first('工作亮点') }}</div>
          </el-form-item>
          <el-form-item label="问题和建议">
            <el-input
              v-validate="'required'" name="问题和建议"
              type="textarea"
              :rows="3"
              placeholder="请输入内容"
              v-model="context3"
            >
            </el-input>
            <div class="el-form-item__error">{{ errors.first('问题和建议') }}</div>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="showI = false">取 消</el-button>
          <el-button type="primary" @click="saveChangeXJ">提 交</el-button>
        </span>

      </el-dialog>


      <el-dialog
        title="查看小结"
        :visible.sync="showI2"
      >
        <el-form labelWidth="140px">
          <el-form-item label="基本情况：">
            {{context1}}
          </el-form-item>
          <el-form-item label="工作亮点：">
            {{context2}}
          </el-form-item>
          <el-form-item label="问题和建议：">
            {{context3}}
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </section>
</template>

<script>
export default {
  data() {
    return {
      ts: this.newStore(),
      showI: false,
      showI2: false,
      year: '',
      xjList: [],
      context1: '',
      context2: '',
      context3: '',
      id: '',
    };
  },
  created() {
    this.getxjList0();
  },
  methods: {
    checkXJ(item) {
      this.showI2 = true;
      this.context1 = item.hash.context1;
      this.context2 = item.hash.context2;
      this.context3 = item.hash.context3;
    },
    changeXJ(item) {
      this.showI = true;
      this.context1 = item.hash.context1;
      this.context2 = item.hash.context2;
      this.context3 = item.hash.context3;
      this.id = item.hash.id;
    },
    saveChangeXJ() {
      this.$validator.validateAll().then((result) => {
        if (result) {
          const req = {
            handle: 'B37BA078041E48C7C2D38EEC842C5DAA783849DBBE61C31EBFF0B9210751F692',
            id: this.id,
            context1: this.context1,
            context2: this.context2,
            context3: this.context3,
          };
          this.spost(this.ts, '/mainservlet', req).then(() => {
            this.$message({
              message: '提交成功！',
              type: 'success',
            });
            this.showI = false;
            this.getxjList();
          });
        } else {
          this.$message.error('内容不能为空！');
          return false;
        }
      });
    },
    getxjList0() {
      const a = `${new Date().getFullYear()}`;
      this.year = a;
      const req = {
        handle: 'B37BA078041E48C7C2D38EEC842C5DAA05DC1C098D6416F6BFF0B9210751F692',
        year: a,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.xjList = ts.d.data.operation1;
      });
    },
    getxjList() {
      if (this.year) {
        const req = {
          handle: 'B37BA078041E48C7C2D38EEC842C5DAA05DC1C098D6416F6BFF0B9210751F692',
          year: this.year,
        };
        this.spost(this.ts, '/mainservlet', req).then((ts) => {
          this.xjList = ts.d.data.operation1;
        });
      } else {
        this.$message.error('请选择时间');
      }
    },
  },
};
</script>

<style lang="stylus" scoped>
.el-breadcrumb
  height 60px
  line-height 60px
.select_top
  width 92%
  margin 20px auto
</style>
